<template>
	<view>
		<page-header backText="返回" showBack='true' title="个人信息"></page-header>
		<view class="mask" v-show="showMask">
			<view class="popup popup-bottom">
				<view @tap="setSex(1)">男</view>
				<view class="m1" @tap="setSex(-1)">女</view>
				<view class="back" @click="hide">取消</view>
			</view>
		</view>
		<view  class="m20">
			<navigator url="modifyname" hover-class="navigator-hover"> 
				<list-item text="个人昵称" newtext="Ma Jiang" showright='true'></list-item> 
			</navigator>
		</view>
		<view @tap="showPopup" class="m20">
			<list-item text="性别" :newtext="sex" showright='true'></list-item>  
		</view>
	</view>
</template>

<script>
	import pageHeader from "../../components/pageHeader.vue"
	import listItem from "../../components/listItem.vue"
	export default {
		data(){
			return{
				sex:'男' ,
				showMask:false
			}
		},
		components:{
			pageHeader,
			listItem
		},
		methods:{
			showPopup(){
				this.showMask = !this.showMask
			},
			hide(){
				this.showMask = !this.showMask
			},
			setSex(u){
				if(u == 1){
					this.sex = '男'
				}else{
					this.sex = '女'
				}
				this.showMask = !this.showMask 
			},
		},
		onShow:function(){
			//页面显示钩子函数
		}
	}
</script>

<style>
	.m1{margin-top: 1px;}
	.m20{margin-top: 20px;}
	.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	} 
	.popup {
		position: absolute;
		z-index: 999;
		-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .1);
		box-shadow: 0 0 30px rgba(0, 0, 0, .1);
	}
	.popup-bottom {
		bottom: 0;
		width: 100%;
		text-align: center;
		
	}
	.popup-bottom{
		line-height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-bottom view{
		background-color: #fff; 
		width: 95%;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	}
	.back{
		color: #fe0000;
		margin-top: 20px;
		margin-bottom: 30px; 
	}
</style>
